<template>
  <article
    class="whitespace-nowrap max-w-22 model-card"
    flex="~ col justify-center items-center basis-22 shrink-0"
  >
    <div id="model-img" class="relative">
      <Transition>
        <img
          v-if="Array.isArray(data.icon_urls) && data.icon_urls.length && loaded"
          :src="data.icon_urls[0]"
          alt="模型图标"
        />
        <IconCardSpinning v-else color="var(--color-primary)" />
      </Transition>
      <div id="model-category" :style="{ backgroundColor: categoryData?.category_color }">
        {{ categoryData?.category_name ?? '' }}
      </div>
      <div v-if="!categoryData?.is_mandatory && closable" id="close-btn">
        <div class="w5 h5 bg-#29292f rd-50%" flex="~ justify-center items-center">
          <n-icon @click.stop="onDelete?.(data)"><CloseRound /></n-icon>
        </div>
      </div>
    </div>
    <div class="font-600 px-1 text-3.5 text-nowrap w-full overflow-hidden text-ellipsis">
      {{ data.model_name }}
    </div>
  </article>
</template>

<script setup lang="ts">
import type { Model } from '@/service/types'
import { useModelCategory } from '@/stores/useModelCategory'
// import IconClose from './icons/IconClose.vue'
import { CloseRound } from '@vicons/material'
import { NIcon } from 'naive-ui'
import { computed } from 'vue'
import IconCardSpinning from './icons/IconCardSpinning.vue'
const props = defineProps<{ data: Model; closable?: boolean; onDelete?: (model:Model) => void }>()
const loaded = ref(false)
/** 模型列表 */
const { getCategory } = useModelCategory()
const categoryData = computed(() => {
  return getCategory(props.data.category_code)
})

onBeforeMount(() => {
  new Promise((resolve) => {
    const image = new Image()
    image.src = props.data.icon_urls ? props.data.icon_urls[0] : ''
    if (image.complete) {
      loaded.value = true
      resolve(true)
      return
    }

    image.onload = () => {
      loaded.value = true
      resolve(true)
    }

    image.onerror = (error) => {
      loaded.value = true
      resolve(true)
    }
  })
})
</script>

<style scoped>
.model-card {
  #model-img {
    height: 6rem;
    border-radius: 0.5rem;
    display: flex;
    flex: 1;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 100%;
    background-color: #666666;
    img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 0.5rem;
    }
  }
  #model-category {
    top: 0px;
    height: 1.25rem;
    width: 100%;
    font-size: 0.75rem;
    font-weight: 700;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
  }
  #close-btn {
    width: 1.65rem;
    height: 1.65rem;
    background-color: black;
    border-radius: 50%;
    position: absolute;
    right: -0.64rem;
    top: -0.64rem;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
.v-enter-active,
.v-leave-active {
  opacity: 1;
  transition: all 0.4s linear;
  will-change: opacity;
}

.v-enter-from,
.v-leave-to {
  opacity: 0;
  will-change: opacity;
}
</style>
